<!--vue模板-->
<template>
    <div style="padding: 10px;">
        <!-- 头部搜索 -->
        <el-form ref="form" :inline="true" :model="formInline" class="form-inline">
            <el-form-item label="用户账号" prop="account">
                <el-input v-model="formInline.account" placeholder="用户账号"  />
            </el-form-item>

            <el-form-item label="真实姓名" prop="name">
                <el-input v-model="formInline.name" placeholder="真实姓名"  />
            </el-form-item>

            <el-form-item label="是否锁定" prop="isLock">
                <el-select v-model="formInline.isLock" clearable placeholder="是否锁定">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
        </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button @click="resetForm(form)">清空</el-button>
                <el-divider direction="vertical" border-style="solid" />
                <el-button type="primary" plain @click="addUser">添加用户</el-button>
            </el-form-item>
        </el-form>
        <!-- 操作按钮 新增之类 -->


        <!-- 表格数据展示 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="expand">
                <template #default="scope">
                    <!-- 描述用户信息 -->
                    <el-descriptions border title="用户信息展示" style="padding: 10px;">
                        <el-descriptions-item label="真实姓名">{{ scope.row.name }}</el-descriptions-item>
                        <el-descriptions-item label="账号">{{ scope.row.account }}</el-descriptions-item>
                        <el-descriptions-item label="生效时间">{{ scope.row.effectiveDate }}</el-descriptions-item>
                        <el-descriptions-item label="上次登录时间">{{ scope.row.loginTime }}</el-descriptions-item>
                        <el-descriptions-item label="角色信息">{{ scope.row.roles }}</el-descriptions-item>
                        <el-descriptions-item label="是否锁定">
                            <el-tag size="small">{{ scope.row.isLock == 0 ? '正常' : '已锁定' }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="备注">{{ scope.row.note }}</el-descriptions-item>
                        <el-descriptions-item label="签名图片">
                            <img v-if="scope.row.signUrl" :src="scope.row.signUrl" alt="" style="width: 12.5rem;" />
                            <el-tag type="primary" v-else>未上传</el-tag> 
                            </el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column prop="account" label="账号" header-align="center" align="center" />
            <el-table-column prop="name" label="真实姓名" header-align="center" align="center" />
            <!-- 是否锁定 -->
            <el-table-column prop="isLock" label="是否锁定" header-align="center" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.isLock" class="mt-2" :active-value="1" :inactive-value="0"
                        style="margin-left: 24px" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="changeLock(scope.row)" />
                </template>
            </el-table-column>
            <!-- 角色信息 -->
            <el-table-column prop="roles" label="角色" header-align="center" align="center" />
            <el-table-column label="操作" header-align="center" align="center">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" circle @click="updateUser(scope.row)" />
                    <el-button type="danger" :icon="Delete" circle @click="deleteById(scope.row.id)" />
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="display: flex; align-items: flex-end;justify-content: end; margin: 10px;"
            v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" :disabled="disabled"
            :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </div>

    <SaveOrUpdate ref="saveOrUpdate"
        @close="close"
    ></SaveOrUpdate>

</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, reactive, onMounted, provide } from 'vue'
import userApi from '@/api/UserApi.js'
//  添加修改 update
import SaveOrUpdate from './SaveOrUpdate.vue'

import { Check, Close } from '@element-plus/icons-vue'

import {
    Delete,
    Edit
} from '@element-plus/icons-vue'


//  定义是否锁定
const options = [
  {
    value: '0',
    label: '未锁定',
  },
  {
    value: '1',
    label: '已锁定',
  },
]


// --------------------saveOrUpdate
const saveOrUpdate = ref(null)
const form = ref(null)





// 添加弹窗开关
const isShow = ref(false)

provide('visible',isShow)


// 添加用户方法
const addUser = () => {
    saveOrUpdate.value.clearForm()
    // 打开弹窗
    isShow.value = true
}

// 搜索数据表单
const formInline = reactive({
    account: "",
    name: ''
})

const pageSize = ref(10)
const pageNum = ref(1)
const background = ref(false)
const disabled = ref(false)

// 获取搜索表单实例


// 分页查询变化
function handleSizeChange(pageSize) {
    console.log("pageSize", pageSize);
    init()
}

function handleCurrentChange(pageNum) {
    console.log("pageNum", pageNum);
    init()
}




function updateUser(row) {
    // 打开弹窗
    isShow.value = true;
    saveOrUpdate.value.initUser(row)
}



// 用户数据存储
const tableData = ref([])
// 当前数据条数
const total = ref(10);


// 获取当前存储的数据
const init = () => {

    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }

    params.account = formInline.account;
    params.name = formInline.name

    if(formInline.isLock) {
        params.isLock = formInline.isLock
    }

    userApi.getAll(params).then(resp => {
        console.log("resp da", resp);
        tableData.value = resp.data.list
        total.value = resp.data.total
    })

}

// 获取用户数据
onMounted(() => {
    init()
})

// 搜索提交
const onSubmit = () => {
    // console.log(formInline,"1234");
    init()
    console.log('submit!')
}

// 修改用户的lock状态
const changeLock = (val) => {
    console.log("val", val);
}


// 删除用户根据id
const deleteById = (id) => {

    console.log("id");

    ElMessageBox.confirm(
        '您将要删除当前用户，是否删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            userApi.deleteUserById(id).then(resp => {
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                init()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除！',
            })
        })

}

// 
function close() {
    init()
}


// 清空form表单
const resetForm = (formEl) => {
    console.log(formEl,"formEl");
    formEl.resetFields()
    init()
}

</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>